/* 创建课程
修改人：曾俊达
时间：2020/6/22 */
<template>
    <div class="about">
        <!--查询界面-->
        <!-- <h4>租客</h4> -->
        <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
                <el-col :xl="6" :md="8" :sm="24">
                    <el-form-item label="课程名称" prop="courseName">
                        <el-input placeholder="请输入课程名称" v-model="searchForm.courseName" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xl="6||24" :md="8||24" :sm="24">
                    <el-form-item>
                        <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                            <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-form>
        </div>

        <!-- 新增 -->
        <div>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="add()">申请新课程</el-button>

            <!-- <el-button type="primary" plain @click="en_disables(1)">批量启用</el-button>
      <el-button type="primary" plain @click="en_disables(0)">批量停用</el-button> -->
        </div>

        <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection" row-key="id">
            <template slot="tb-columns">

                <el-table-column align="center" prop="avatarUrl" label="课程封面" width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatarUrl" width="80" height="80"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="teacher" label="申请教师"></el-table-column>
                <el-table-column align="center" prop="courseType" label="课程类别" ></el-table-column>
                <el-table-column  label="课程名称" width="100">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p>课程描述: {{ scope.row.courseDescription}}</p>
                        <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.courseName }}</el-tag>
                        </div>
                        </el-popover>
                    </template>
              </el-table-column>
                <el-table-column align="center" prop="createTime" label="申请时间"></el-table-column>

                 <el-table-column fixed="right" align="center" width="120" label="审核状态">
                     <template slot-scope="scope">
                         
                         <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,1)"
                             v-if="scope.row.status==0" disabled>审核不通过</el-link>
                         <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,0)" 
                            v-else-if="scope.row.status==1" disabled>审核通过</el-link>
                            <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,2)"
                                v-else-if="scope.row.status==2" disabled>待审核</el-link>
                            <!-- <el-divider direction="vertical"></el-divider> -->
                            <!-- <el-link :underline="false" type="primary" @click="remove(scope.row.id)">删除</el-link> -->
                            <!-- <el-button type="danger" @click="remove(scope.row.id)" round>删除</el-button> -->
                         
                     </template>
                 </el-table-column>
                 <el-table-column fixed="right" align="center" width="90" label="操作">
                     <template slot-scope="scope">
                         <el-button type="danger" @click="remove(scope.row.id)" v-if="scope.row.status==1"
                             disabled round>删除</el-button>
                        <el-button type="danger" @click="remove(scope.row.id)" v-else round>删除
                        </el-button>
                     </template>
                 </el-table-column>

            </template>
        </page-table>
        <!-- 弹出添加的窗口 -->
        <Edit :visible='visible' :title='title' :defaultFormData='defaultFormData' v-if='visible' @close='close' />

    </div>
</template>



<script>
    import PageTable from '@/components/common/PageTable'
    import {
        page,
        updateUseful,
        remove
    } from '@/api/modules/create_class'
    import Edit from '@/views/teacher/create_class/class_edit'
    import {getCookie} from '@/libs/cookie'
    // import About from './about'
    export default {
        name: "create_class",
        components: {
            PageTable,
            Edit
        },
        data() {

            return {
                searchForm: {
                    name: '',
                   
                },
                user:{
                },
                multipleSelection: [],
                visible: false,
                username: '',
                defaultFormData: {},
                user:{},
            };
        },
        methods: {
            //删除
            remove(id) {

                //弹窗询问是否删除
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    remove(id).then(res => {
                        this.toast(res.message)
                        //重新刷新表单数据
                        this.$refs.dataTable.loadTableData('reload')
                    })
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },

            en_disable(id, status) {
                updateUseful({
                    ids: id,
                    status: status
                }).then(res => {
                    this.toast(res.message)
                    this.$refs.dataTable.loadTableData('reload')
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },

            en_disables(status) {
                let ids = [];
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
                updateUseful({
                    ids: ids.join(','),
                    status: status
                }).then(res => {
                    this.toast(res.message)
                    this.$refs.dataTable.loadTableData('reload')
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },

            close(val) {
                this.visible = false
                if (val) {
                    this.$refs.dataTable.loadTableData('reload')
                }
            },

            add() {
                this.visible = true
                this.title = '申请课程'
                this.defaultFormData = {}
            },

            edit(row) {
                //console.log(row)
                this.visible = true
                this.title = '编辑'
                this.defaultFormData = row
            },

            stateFormat(row) {
                if (row.sex === 1) {
                    return '男'
                } else {
                    return '女'
                }
            },

            loadTableData(filter, callback) {
                this.user = JSON.parse(getCookie("user") || '{}');
                
                filter = {
                    ...filter,
                    ...this.searchForm,
                    ...this.user
                }
                page(filter).then(res => {
                    this.total = res.data.total
                    // console.log(this.total)
                    let tableData = {
                        ...res.data,
                        data: res.data.records

                    }
                    callback(tableData)

                })
            },
            selection(val) {
                this.multipleSelection = val;
            },
            search() {
                this.$refs.dataTable.loadTableData('reload')
            },
            reset() {
                this.$refs.searchForm.resetFields()
                this.$refs.dataTable.loadTableData('reload')
            },


        }
    };
</script>
